<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-sys__user">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item v-if="this.$store.state.user.merchantId === 0">
          <el-input v-model="dataForm.name" placeholder="支付终端名称" clearable></el-input>
        </el-form-item>
        <el-form-item v-if="this.$store.state.user.merchantId === 0">
          <el-input v-model="dataForm.merchantName" placeholder="商户名称" clearable></el-input>
        </el-form-item>
        <el-form-item v-if="this.$store.state.user.merchantId === 0">
          <el-button @click="getDataList(1)">查询</el-button>
        </el-form-item>
        <el-form-item>
          <!--<el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>-->
        </el-form-item>
        <el-form-item v-if="this.$store.state.user.merchantId !== 0">
          <el-button  type="success" @click="disableOpenHandle()">启用</el-button>
        </el-form-item>
        <el-form-item v-if="this.$store.state.user.merchantId !== 0">
          <el-button  type="danger" @click="disableHandle()">禁用</el-button>
        </el-form-item>
        <el-form-item>
          <!--<el-button  type="info" @click="exportHandle()">导出</el-button>-->
        </el-form-item>
      </el-form>
      <el-table
          v-loading="dataListLoading"
          :data="dataList"
          border
          size="mini"
          @row-click="clickRow"
          ref="moviesTable"
          :height="tableHeight"
          @selection-change="dataListSelectionChangeHandle"
          @sort-change="dataListSortChangeHandle"
          style="width: 100%;">
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column prop="type" label="支付方式" header-align="center" align="center">
          <template slot-scope="scope">{{scope.row.type === 2 ? '支付宝':'微信'}}</template>
        </el-table-column>
        <el-table-column prop="memchantName" label="商户名称" header-align="center" align="center"></el-table-column>
        <el-table-column prop="modeName" label="终端名称" header-align="center" align="center"></el-table-column>
        <el-table-column prop="modeDesc" label="支付说明" header-align="center" align="center"></el-table-column>
        <el-table-column prop="enabled" label="是否使用" header-align="center" align="center">
          <template slot-scope="scope">
            <el-tag
                :type="scope.row.enabled === 1 ? 'success' : 'danger'" size="small"
                disable-transitions>{{scope.row.enabled === 1?'是':'否'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column v-if="this.$store.state.user.merchantId !== 0" label="操作" fixed="right" header-align="center" align="center" width="150">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="addOrUpdateHandlePay(scope.row.id,scope.row.modeConfig)">
              <span :style="{color: scope.row.modeConfig?'#67C23A':'#057fea'}">{{scope.row.modeConfig?'已配置':'设置'}}</span>
            </el-button>
            <el-button v-if="scope.row.enabled === 1" type="text" size="small" @click="disableHandle(scope.row.id)">禁用</el-button>
            <el-button v-else type="text" size="small" @click="disableOpenHandle(scope.row.id)">启用</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          :current-page="current"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="pageSizeChangeHandle"
          @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './pay-add-or-update.vue'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/tPaymode/list',
        getDataListIsPage: true,
        deleteURL: '/tPaymode/del',
        deleteIsBatch: true,
        reviewURL: '/tPaymode/paymodeOpen',
        reviewIsBatch: true,
        exportURL: '/sys/user/export'
      },
      dataForm: {
        merchantId: this.$store.state.user.merchantId ? this.$store.state.user.merchantId : 0,
        name: '',
        merchantName: ''
      }
    }
  },
  methods: {
    // 新增 / 修改
    addOrUpdateHandlePay (id, modeConfig) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.dataForm.id = id
        this.$refs.addOrUpdate.modeConfig = modeConfig
        this.$refs.addOrUpdate.init()
      })
    }
  },
  components: {
    AddOrUpdate
  }
}
</script>
